import React from 'react'
import { Tooltip, Icon } from 'antd';
import styles from './index.less'
import MyIcon from '@/components/MyIcon'

const IconButton = ({ title, placement = 'top', icon, disabled = false, onClick, loading = false, ...rest }) => {
  let className = disabled ? `${styles.button} ${styles.disabled}` : styles.button
  let type = loading ? 'loading' : icon
  let renderIcon = type.startsWith('icon') ? <MyIcon type={type} style={{ fontSize: 28 }}></MyIcon> : <Icon type={type} style={{ fontSize: 28 }} />
  let buttonContent = (
    <div className={styles.container} {...rest}>
      <div className={className} onClick={onClick}>
        {renderIcon}
      </div>
    </div>
  )
  if (title) {
    return (
      <Tooltip title={title} placement={placement}>
        {buttonContent}
      </Tooltip>
    )
  }
  return buttonContent

}
export default IconButton
